<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Cook - Salt Meal Backend</title>
  <script th:src="@{../js/onesalt.js}" src="../static/js/onesalt.js"></script>
  <script th:if="false" src="../static/js/json2.js"></script>
  <link th:if="false" rel="stylesheet" href="../static/css/bootstrap.min.css" />
  <link th:if="false" rel="stylesheet" href="../static/css/bootstrap-theme.min.css" />
</head>
<body>
  <div class="panel">
    <h3>厨师列表</h3>
    <div class="list-group">
      <div class="list-group-item">
        <form class="form-inline container" id="search_form" onSubmit="submitSearch();return false;">
          <input type="hidden" name="pageIndex" th:value="${page.number}" value="0" />
          <input type="hidden" name="pageSize" th:value="${page.size}" value="10" />
          <input type="hidden" name="totalPages" th:value="${page.totalPages}" value="1" />
          <div class="row">
            <div class="form-group-sm col-md-3">
              <label>厨子ID：</label>
              <input type="text" class="form-control" name="sn" />
            </div>
            <div class="form-group-sm col-md-3">
              <label>姓名：</label>
              <input type="text" class="form-control" name="name" />
            </div>
            <div class="form-group-sm col-md-3">
              <label>所在城市：</label>
              <!-- Split button -->
              <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                  <span id="city-span">所在城市</span>
                  <span class="caret"></span>
                </button>
                <input type="hidden" name="city" value="" />
                <ul class="dropdown-menu" role="menu">
                  <li th:each="city:${cities}">
                    <a class="city-link" th:text="${city}" href="#">上海</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-1" style="height:5px;">
            </div>
          </div>
          <div class="row">
            <div class="form-group-sm col-md-3">
              <label>餐厅名称：</label>
              <input type="text" class="form-control" name="kitchenName" />
            </div>
            <div class="form-group-sm col-md-3">
              <label>联系电话：</label>
              <input type="text" class="form-control" name="tel" />
            </div>
            <div class="form-group-sm col-md-3">
              <label>手机号：</label>
              <input type="text" class="form-control" name="mobile" />
            </div>
          </div>
          <div class="row">
            <div class="col-md-1" style="height:5px;">
            </div>
          </div>
          <div class="row">
            <div class="form-group-sm col-md-3">
              <label>擅长厨艺：</label>
              <input type="text" class="form-control" name="skills" />
            </div>
            <div class="form-group-sm col-md-6">
              <label>年龄：</label>
              <input type="text" class="form-control" name="startAge" />
              -
              <input type="text" class="form-control" name="endAge" />
            </div>
          </div>
          <div class="row">
            <div class="col-md-1" style="height:5px;">
            </div>
          </div>
          <div class="row">
            <div class="form-group-sm col-md-3">
              <label>邮箱：</label>
              <input type="text" class="form-control" name="email" />
            </div>
            <div class="form-group-sm col-md-3">
              <label>社交帐号：</label>
              <input type="text" class="form-control" name="socialAccount" />
            </div>
          </div>
          <div class="row">
            <div class="col-md-1" style="height:5px;">
            </div>
          </div>
          <div class="row">
            <div class="form-group-sm col-md-6">
              <label>注册时间：</label>
              <div class="input-group date form_date" data-date-format="yyyy-mm-dd">
                <input class="form-control" type="text" name="registerStartTime" value="" readonly="readonly" />
                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
              </div>
              -
              <div class="input-group date form_date" data-date-format="yyyy-mm-dd">
                <input class="form-control" type="text" name="registerEndTime" value="" readonly="readonly" />
                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
              </div>
              <br/>
            </div>
          </div>
          <div class="row">
            <div class="col-md-1" style="height:5px;">
            </div>
          </div>
          <div class="row">
            <div class="form-group-sm col-md-6">
              <label>申请时间：</label>
              <div class="input-group date form_date" data-date-format="yyyy-mm-dd">
                <input class="form-control" type="text" name="applyStartTime" value="" readonly="readonly" />
                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
              </div>
              -
              <div class="input-group date form_date" data-date-format="yyyy-mm-dd">
                <input class="form-control" type="text" name="applyEndTime" value="" readonly="readonly" />
                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
              </div>
              <br/>
            </div>
          </div>
          <div class="row">
            <div class="col-md-1" style="height:5px;">
            </div>
          </div>
          <div class="row">
            <div class="col-md-5">
              <div class="form-group form-group-sm">
                <label>备注：</label>
                <input type="text" class="form-control" name="notes" />
              </div>
              <div class="form-group form-group-sm">
                <input type="submit" class="form-control" value="搜索" />
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="list-group-item text-right">
        <a class="btn btn-default" th:href="@{./cooks/add}" href="#">新增</a>
      </div>
      <div class="list-group-item">
        <table class="table table-striped">
          <tr>
            <th>序号</th>
            <th>厨子ID</th>
            <th>姓名</th>
            <th>所在城市</th>
            <th>餐厅名字</th>
            <th>手机号</th>
            <th>申请时间</th>
            <th>备注</th>
            <th>操作</th>
          </tr>
          <tr th:each="user:${page.content}">
            <td th:text="${page.number * page.size + userStat.index + 1}">1</td>
            <td th:text="${user.sn}">CHN001</td>
            <td th:text="${user.name}">张三</td>
            <td th:text="${user.city}">上海</td>
            <td><a href="#" th:href="@{'./kitchens?cookId=' + ${user.cook.cookId}}" th:text="${user.cook.kitchen != null ? user.cook.kitchen.name : ''}">餐厅1</a></td>
            <td th:text="${user.mobile}">13800000000</td>
            <td th:text="${user.cook.applyTime != null ? #calendars.format(user.cook.applyTime, 'yy-MM-dd hh:mm') : ''}">2012-03-18 18:00</td>
            <td th:text="${user.notes}">xxx</td>
            <td><div class="btn-group">
                <button type="button" class="btn btn-default" th:onClick="@{'showCook(\'' + ${user.sn} + '\');'}">查看</button>
                <button type="button" class="btn btn-default" th:onClick="@{'editCook(\'' + ${user.sn} + '\');'}">编辑</button>
                <button type="button" class="btn btn-default" th:onClick="@{'delCook(\'' + ${user.sn} + '\');'}">删除</button>
              </div></td>
          </tr>
        </table>
      </div>
      <div th:if="${page.totalPages} &gt; 1" class="list-group-item">
        <nav>
          <ul class="pagination">
            <li th:class="${page.number} &gt; 0 ? '': 'disabled'">
              <a href="#" th:onclick="${page.number} &gt; 0 ? 'changePage(' + ${page.number - 1} + ');return false;' : 'return false;'" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
            </li>
            <li th:class="${page.number} == ${x - 1} ? 'active': ''" th:each="x : ${#numbers.sequence(1,page.totalPages)}">
              <a href="#" th:onclick="${page.number} == ${x - 1} ? 'return false;' : 'changePage(' + ${x - 1} + ');return false;'" th:text="${x}">1</a>
            </li>
            <li th:class="${page.totalPages} &gt; (${page.number} + 1) ? '': 'disabled'">
              <a href="#" th:onclick="${page.totalPages} &gt; (${page.number} + 1) ? 'changePage(' + ${page.number + 1} + ');return false;' : 'return false;'" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
    <br />
  </div>
  <script>
    $(function() {
      $('.form_date').datetimepicker({
        language:  'zh-CN',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1,
        minView: 2
        });
      $(".city-link").click(function(e) {
        selectCity($(this).text());
      });
    });
    function submitSearch() {
      loadContent('./cooks?' + $('#search_form').serialize());
    }
  
    function showCook(cookId) {
      loadContent('./cooks/' + cookId);
    }
    
    function editCook(cookId) {
      alert(cookId);
      loadContent('./cooks/' + cookId + '?edit=true');
    }
    
    function selectCity(city) {
      $("#city-span").text(city);
      $("#search_form input[name='city']").first().attr("value", city);
    }
    
    function delCook(cookId) {
      $.ajax({
        url: './api/cooks/' + cookId,
        type: 'delete',
        success: function(data) {
          $("#search_form").submit();
        },
        error: function(e) {
        }
      });
    }
    
    function changePage(pageIndex) {
      var element = $("#search_form input[name='pageIndex']").first();
      element.attr("value", pageIndex);
      $("#search_form").submit();
    }
  </script>
</body>
</html>